<script setup>
const props = defineProps({
  options: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const tAnimationConfig = computed(() => {
  return {
    Basis: 'x',
    Duration: 8000,
    Length: props.options.xAxis ? props.options.xAxis.data.length : 99
  }
})
</script>

<template>
  <div style="width: 100%; height: 100%">
    <dv-border-box7 class="my-box7" :color="['#0749a3', '#4195d2']">
      <div class="dom-box">
        <div class="dom-title">月度工单产量统计</div>
        <div class="dom-content purshare">
          <div class="purshare-item">
            <ps-chart2 :option="props.options" tooltipAnimation :tAnimationConfig="tAnimationConfig" />
          </div>
          <div class="purshare-item desc">
            <div class="item-content" v-if="props.options.ddata">
              <div class="title">本月工单数量</div>
              <div class="value">{{ props.options.ddata?.current }}</div>
            </div>

            <div class="item-content">
              <div class="title">上月工单数量</div>
              <div class="value">{{ props.options.ddata?.last }}</div>
            </div>
            <div class="item-content">
              <div class="title">环比变化</div>
              <div class="value">{{ props.options.ddata?.change }}</div>
            </div>
          </div>
        </div>
      </div>
    </dv-border-box7>
  </div>
</template>

<style scoped lang="scss">
@font-face {
  font-family: 'UnidreamLED';
  src: url(../../../assets/font/DS-Digital/DS-DIGI-1.ttf); /***兼容ie9***/
}

.purshare {
  flex: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  &-item {
    &:first-child {
      flex: 2;
    }

    &:last-child {
      flex: 1;

      padding-left: 30px;
    }

    .item-content {
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 10px;
      padding-left: 10px;
      position: relative;

      .title {
        font-size: 12px;
        line-height: 2;
      }
      .value {
        font-size: 22px;

        color: #0e94ea;
        font-family: UnidreamLED;
        font-weight: bold;
      }

      &::before {
        content: '';
        position: absolute;
        top: 20%; // 垂直居中
        left: 0;
        width: 3px; // 边框宽度
        height: 60%; // 固定高度
        background: linear-gradient(to top, rgba(255, 255, 255, 0.1), #298cec); // 渐变颜色
      }
    }
  }
}
</style>
